<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-07 16:15:36
 -->
<template>
  <div>
    <div v-if="isShowTitle" class="clearfix">
      <h3>价格信息</h3>
      <el-divider />
    </div>
    <vxe-grid
      class="grid"
      border
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="priceData"
    />
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { specs } from './mixins'
import { getPriceData, initDefaultPriceData, initUpdatePriceData } from './utils/price'
import store from '@/store'

export default {
  name: 'GoodPrice',
  mixins: [oftenuse, specs],
  props: {
    /**
     * 规格数据
     */
    skuData: {
      type: Object,
      default: () => { return {} }
    },
    /**
     * 单位数据
     */
    unitData: {
      type: Array,
      default: () => { return [] }
    },
    /**
     * 是都显示标题
     */
    isShowTitle: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示编辑框
     */
    isEdit: {
      type: Boolean,
      default: true
    },
    /**
     * 是否自动watch的时候计算价格
     */
    priceAuto: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      comps: {},
      tabName: null,
      tabDefaultName: null,
      specsTabData: [],
      priceData: [],
      originColumnsData: [
        { field: 'priceCatName', width: 150,
          title: '价格分类'
        }
      ],
      priceType: store.getters.appData.configs.priceTypes,
      ruleValidator: { }
    }
  },
  computed: {
    isShowCopybtn: function() {
      return this.specsTabData.length !== 1
    },
    columnsData: function() {
      const originColumnsData = this.originColumnsData
      const unitPriceCols = []
      const unitData = this.unitData || []
      const cellRender = {
        name: 'ElInput',
        props: { size: 'mini', min: 0 },
        events: { blur: this.onPriceChange }
      }
      unitData.forEach(item => {
        if (item.label) {
          const colObj = {
            field: item.value,
            title: `价格/${item.label}`,
            width: 150
          }
          if (this.isEdit) {
            colObj.cellRender = cellRender
          }
          unitPriceCols.push(colObj)
        }
      })
      return [...originColumnsData, ...unitPriceCols]
    }
  },
  watch: {
    'skuData': {
      handler(skuData) {
        if (!skuData) return
        if (!this.priceAuto) return
        const unitData = this.unitData || []
        const { goodspriceList } = skuData
        this.initData(goodspriceList, unitData)
      },
      immediate: true
    },
    'unitData': {
      handler(unitData) {
        if (!this.priceAuto) return
        if (!unitData) return
        const skuData = this.skuData || []
        const { goodspriceList } = skuData
        this.initData(goodspriceList, unitData)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  mounted() {
    this.$set(this.comps, 'table', this.$refs.table)
  },
  methods: {
    // export-api
    /**
     * 获取价格最终数据
     */
    getPriceData() {
      const unitData = this.unitData
      const priceData = this.priceData
      const priceType = this.priceType
      return getPriceData(unitData, priceData, priceType)
    },
    //
    initData(goodspriceList, unitData) {
      const priceType = this.priceType
      this.priceData = goodspriceList
        ? initUpdatePriceData(priceType, unitData, goodspriceList)
        : initDefaultPriceData(priceType, unitData)
    },
    setPriceData(goodspriceList) {
      const priceType = this.priceType
      const unitData = this.unitData
      this.priceData = initUpdatePriceData(priceType, unitData, goodspriceList)
    },
    /**
     * 根据value获取单位data对象
     */
    getUnitObjByValue(value) {
      const unitArr = this.unitData
      const arr = unitArr.filter(item => { return item.value === value })
      if (!arr) return null
      return arr[0]
    },
    // on
    onPriceChange({ row, column }) {
      const { property } = column
      row[property] = this.$amount(row[property]).format()
      this.handleUnitPrice({ row, column })
    },
    handleUnitPrice({ row, column }) {
      const { property } = column
      const unitObj = this.getUnitObjByValue(property)
      if (!unitObj) return
      if (unitObj.multi !== 1) return
      const unitBaseObj = unitObj
      const baseQty = row[unitBaseObj.value]
      Object.keys(row).forEach(key => {
        if (key !== unitBaseObj.value) {
          const unitObj = this.getUnitObjByValue(key)
          if (unitObj) {
            const taegetQty = this.$amount(baseQty).multiply(unitObj.multi).format()
            this.$set(row, key, taegetQty)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal{
    margin: 5px 0;
  }
</style>
